<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="commons/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script src="${ctx }/static/js/jquery.js"></script>
<script src="${ctx }/static/js/pintuer.js"></script>
</head>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<style type="text/css">
			html,body{height: 100%;margin: 0;padding: 0;}
			a{text-decoration:none}
			.nav{
				height: 60px;background-color: #38B3D5;
			}
			.nav1{
				color:#EBF8FB;
				line-height: 60px;
				height: 60px;
				float: left;
				margin-left: 5%;
				font-size: 20px;
			}
			.nav1 h2{
				margin: 0;
				font-weight: bolder;
				
			}
			.nav2{
				color: #EBF8FB;
				text-align: center;
				float: left;
				height: 50px;
				line-height: 60px;
				width: 85%;
				font-size: 22px;
			}
			.container{
				display: -webkit-box;
				-webkit-box-orient: vertical;/*纵向布局*/
				height: 100%;
			}
			.content{
				-webkit-box-flex: 1;
				overflow: auto;
				background-color: #F0EFF5;
			}
			.tx{
				width: 95%;
				background-color: white;
				height: 90px;
				line-height: 90px;
				padding-left: 5%;
				color: #959595;
				font-weight: bolder;
			}
			.tx-logo{
				height: 70px;
				width: 70px;
				float: right;
				margin-right: 55%;
				margin-top: 35px;
			}

			.tx-fh{
				height: 25px;
				float: right;
				margin-right: -240px;
				margin-top: 35px;
			}			
		</style>
	</head>
	<body onload="pageInit()">
	<form method="post" class="form-x" action="dobirthday">
		<div class="container">
			<div class="nav">
				<div class="nav1"><h2><a href="javascript:history.go(-1);"><</a></h2></div>
				<div class="nav2">
					生日
				</div>
			</div>
			<div class="content">
				<div class="tx">
					生日
					<div class="tx-logo">
						<input type="text" class="input"  name="birthday" id="b"
							value="${userMessage.getBirthday()} ">
							         年 :
							    <select style="width: 100px" name="year" id="year"></select> 
							             月 :
        						<select style="width: 100px" name="month" id="month"></select> 
        						日:
        						<select style="width: 100px" name="day" id="day"></select> 
						</div>	
				
					<div class="tx-fh">
						<button type="submit">保存</button>
					</div>
				</div>
		
							    
			
		</div>
		</div>
		</form>
	</body>
	<script type="text/javascript">  
	$('#year').on('click',function () {
	    var a=  $('#year').val();
	    $("#b").val(a);
	})
	$('#month').on('click',function () {
		var aa=  $('#year').val();
	    var a=  $('#month').val();
	    $("#b").val(aa+"."+a);
	})
	$('#day').on('click',function () {
		var aa=  $('#year').val();
	    var a=  $('#month').val();
	    var aaa=  $('#day').val();
	    $("#b").val(aa+"."+a+"."+aaa);
	})
	
    function doyear(){  
        var select = document.getElementById("year");  
        var thisYear = new Date().getFullYear();  
        for(var i=1900;i<=thisYear;i++){  
            var option = document.createElement("option");  
            option.value = i;  
            option.innerText = i;  
            select.appendChild(option);  
        }  
    }  
      
    function domoth(){  
        var select = document.getElementById("month");  
        for(var i=1;i<=12;i++){  
            var option = document.createElement("option");  
            option.value = i;  
            option.innerText = i;  
            select.appendChild(option);  
        }  
    }  
      
    function doday(){  
        var select = document.getElementById("day");   
        var selectYear = parseInt(year.options[year.selectedIndex].value);  
        var selectMonth = parseInt(month.options[month.selectedIndex].value);   
        var date = new Date(selectYear,selectMonth,0);  
          
        for(var i=1;i<=date.getDate();i++){  
            var option = document.createElement("option");  
            option.value = i;  
            option.innerText = i;  
            select.appendChild(option);  
        }  
    }  
      
    function deleteOldChildNodes(){  
        var day = document.getElementById("day");  
        var node=day.firstChild;  
        var tmpNode;  
        while(node!=day.lastChild){  
            tmpNode = node.nextSibling;  
            day.removeChild(node);  
            node = tmpNode;  
        }  
        day.removeChild(day.lastChild);  
    }  
      
    function pageInit(){  
        doyear();  
        domoth();  
        doday();  
        year.onchange = function(){deleteOldChildNodes();doday();};  
        month.onchange = function(){deleteOldChildNodes();doday();};  
    }  
</script>
</html>